<template>
  <div class="search_box">
    <!--搜索框-->
    <div class="search_case">
      <svg class="search_case_icon" aria-hidden="true" @click="handleBack">
        <use xlink:href="#icon-zuojiantou" />
      </svg>
      <input
        type="text"
        v-model.trim="searchValue"
        placeholder="输入宠物种类、品种"
        ref="Focus"
      />
      <svg class="search_case_icon" aria-hidden="true" @click="handleCancel">
        <use xlink:href="#icon-quxiao" />
      </svg>
      <svg class="search_case_icon" aria-hidden="true" @click="handleSearch">
        <use xlink:href="#icon-sousuo1" />
      </svg>
    </div>
    <!--历史记录-->
    <div
      class="search_history"
      v-if="store.state.search.historySearch.length > 0"
    >
      <!--title-->
      <div class="search_historyTop">
        <span>历史</span>
      </div>
      <!--列表-->
      <div class="search_historyList">
        <div
          class="search_historyItem"
          v-for="(item, index) in store.state.search.historySearch"
          :key="index"
          :class="index % 2 == 0 ? 'active' : ''"
        >
          <span @click.prevent="handleHistorySearch(item)">{{ item }}</span>
          <svg
            class="search_history_icon"
            aria-hidden="true"
            @click="handleDelete(index)"
          >
            <use xlink:href="#icon-shanchu" />
          </svg>
        </div>
      </div>
      <!--all删除-->
      <div class="search_history_remove">
        <span @click="handleAllDelete">全部删除</span>
      </div>
    </div>
    <div v-if="searchList && searchList.length > 0" class="pet_list">
      <PetListItem
        v-for="item in searchList"
        :key="item.pet_id"
        :petList="item"
        @click="handlePetDetails(item.pet_id)"
      />
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getSearchList } from "@/api/home";
import PetListItem from "@/views/petTable/component/PetListItem.vue";

export default {
  name: "searchPage",
  components: { PetListItem },
  setup() {
    //输入值
    const searchValue = ref(null);
    const store = useStore();
    const router = useRouter();
    //输入阀
    const isAdd = ref(true);
    //聚焦
    const Focus = ref(null);
    onMounted(() => {
      Focus.value.focus();
    });
    //取消搜索输入
    const handleCancel = () => {
      searchValue.value = null;
    };
    const searchList = ref();
    //搜索
    const handleSearch = async () => {
      //输入值不为空
      if (searchValue.value) {
        store.state.search.historySearch.forEach((item) => {
          if (searchValue.value === item) {
            isAdd.value = false;
          }
        });
        //输入值是否不重复
        if (isAdd.value) {
          store.state.search.historySearch.push(searchValue.value);
          window.localStorage.setItem(
            "search",
            JSON.stringify(store.state.search.historySearch)
          );
        }
        isAdd.value = true;
        // 发起请求，获取关键字列表数据
        getSearchList(searchValue.value).then((res) => {
          console.log("res", res);
          searchList.value = res.data;
        });
      }
    };
    // 点击列表进入宠物详情
    const handlePetDetails = (value) => {
      router.push(`/petTable/${value}`);
    };
    //点击历史条搜索
    const handleHistorySearch = async (value) => {
      searchValue.value = value;
      console.log("搜索", value);
      // 发起请求，获取关键字列表数据
      getSearchList(searchValue.value).then((res) => {
        console.log("res", res);
        searchList.value = res.data;
      });
    };
    //删除记录条
    const handleDelete = (index) => {
      store.commit("search/handleDeleteItem", index);
      window.localStorage.setItem(
        "search",
        JSON.stringify(store.state.search.historySearch)
      );
    };
    //删除全部
    const handleAllDelete = () => {
      store.commit("search/handleDeleteAll");
      window.localStorage.setItem(
        "search",
        JSON.stringify(store.state.search.historySearch)
      );
    };
    //返回
    const handleBack = () => {
      router.go(-1);
    };

    return {
      searchValue,
      searchList,
      Focus,
      handleSearch,
      handleHistorySearch,
      handleCancel,
      handleDelete,
      handleAllDelete,
      handleBack,
      store,
      handlePetDetails,
    };
  },
};
</script>

<style scoped lang="less">
.search_box {
  width: 100%;
  padding-top: 3rem;
  .search_case {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3rem;
    width: 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
    background-color: aliceblue;
    input {
      width: 60%;
      height: 65%;
      border-radius: 1rem;
      border: none;
      font-size: 0.9rem;
      text-align: center;
    }
  }
}
.search_history {
  width: 100%;
  //background-color: #fff;
  .search_historyTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #ffd01e;
    background-color: #fff;
    span {
      color: #db8736;
    }
  }
  .search_historyList {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    .search_historyItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.3rem 1rem;
      box-sizing: border-box;
      span {
        color: #646566;
        font-size: 0.95rem;
        width: 90%;
      }
    }
    .active {
      //background-color: #96979917;
      background-color: #fff;
    }
  }
  .search_history_remove {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      font-size: 0.9rem;
      padding: 0.3rem;
      margin: 0.3rem;
      background-color: #fff;
      border-radius: 0.9rem;
      color: #9b5f25;
    }
  }
}
.search_case_icon {
  width: 1.7rem;
  height: 1.7rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.search_history_icon {
  width: 1rem;
  height: 1rem;
}
.pet_list {
  margin-top: 0.5rem;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 0 0.3rem 1rem;
}
</style>
